<template>
    <div class="dashboard">
      <div class="dashboard-container">
        <div class="dashboard-container-header">
          <h2 style="letter-spacing: 2px; margin-left: 20px;">你好, {{ this.$store.state.currentUser.username }} !</h2>
          <h4 style="letter-spacing: 2px; margin-left: 20px; margin-bottom: 36px; color: #a2a2a2">欢迎来到个人中心</h4>
        </div>
        <div class="dashboard-container-content">
          <el-row>
            <el-col :span="6">
              <el-menu
                :default-active="currentActive"
                :default-openeds="['2', '3']"
                @select="changeActive"
                class="el-menu-vertical-demo">
                <el-menu-item index="1">
                  <i class="el-icon-menu"></i>
                  <span slot="title">概览</span>
                </el-menu-item>
                <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-tickets"></i>
                    <span>我的订单</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="2-1">进行中的订单</el-menu-item>
                    <el-menu-item index="2-2">历史订单</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                  <template slot="title">
                    <i class="el-icon-edit-outline"></i>
                    <span>个人信息</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="3-1">地址管理</el-menu-item>
                    <el-menu-item index="3-2">密码修改</el-menu-item>
                    <el-menu-item index="3-3">头像修改</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </el-col>
            <el-col :span="18" style="padding: 0 26px;">
              <div class="dashboard-content-container" v-if="currentActive === '1'">
                <el-row :gutter="50">
                  <el-col :span="12">
                    <el-card class="summary-card summary-card-active">
                      <h4 style="font-size: 26px; letter-spacing: 2px;"><i class="el-icon-loading" style="margin-right: 20px;"></i>进行中订单数量</h4>
                      <h3 style="text-align: center">{{ currentActiveOrders.length }} 笔</h3>
                    </el-card>
                  </el-col>
                  <el-col :span="12">
                    <el-card class="summary-card summary-card-history">
                      <h4 style="font-size: 26px; letter-spacing: 2px;"><i class="el-icon-success" style="margin-right: 20px;"></i>历史订单数量</h4>
                      <h3 style="text-align: center">{{ currentHistoryOrders.length }} 笔</h3>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
              <div class="dashboard-content-container" v-if="currentActive === '2-1'">
                <transition name="el-zoom-in-top" mode="out-in">
                  <div v-if="currentOrder">
                    <el-button round size="small" @click="currentOrder = null" icon="el-icon-arrow-left">返回进行中的订单</el-button>
                    <el-card style="margin: 16px 0;">
                      <h2 class="details-title">订单详情</h2>
                      <h4 class="sub-details-title">
                        订单状态
                        <span>
                          <el-tag v-if="currentOrder['status'] === 0">待接单</el-tag>
                          <el-tag v-if="currentOrder['status'] === 1">已接单</el-tag>
                          <el-tag v-if="currentOrder['status'] === 2">配送中</el-tag>
                          <el-tag v-if="currentOrder['status'] === 3">已完成</el-tag>
                          <el-tag v-if="currentOrder['status'] === 4">商家拒绝</el-tag>
                          <el-tag v-if="currentOrder['status'] === 5">订单取消</el-tag>
                        </span>
                      </h4>
                      <h4 class="sub-details-title">商家信息</h4>
                      <p class="details-line">名称: {{ currentOrder['storeInfo']['name'] }}</p>
                      <p class="details-line">地址: {{ currentOrder['storeInfo']['address'] }}</p>
                      <h4 class="sub-details-title">订单商品</h4>
                      <el-table :data="currentOrder['orderItems']" border style="width: 100%">
                        <el-table-column prop="productName" label="名称" width="180"></el-table-column>
                        <el-table-column prop="productCount" label="数量" width="180"></el-table-column>
                        <el-table-column label="单价" width="180">
                          <template slot-scope="scope">￥ {{ scope.row['productPrice'] }}</template>
                        </el-table-column>
                        <el-table-column label="总价" width="180">
                          <template slot-scope="scope">￥ {{ scope.row['productPrice'] * scope.row['productCount'] }}</template>
                        </el-table-column>
                        <el-table-column label="图片" width="180">
                          <template slot-scope="scope">
                            <div class="details-image" :style="{ backgroundImage: 'url(' + that.$common.getResourceUrl(scope.row['productImage']) + ')' }"></div>
                          </template>
                        </el-table-column>
                      </el-table>
                      <h4 class="sub-details-title">订单信息</h4>
                      <p class="details-line">订单编号: {{ currentOrder['id'] }}</p>
                      <p class="details-line">下单时间: {{ currentOrder['createTime'] }}</p>
                      <p class="details-line">收货人姓名: {{ currentOrder['contactname'] }}</p>
                      <p class="details-line">收货人联系电话: {{ currentOrder['phone'] }}</p>
                      <p class="details-line">收货人地址: {{ currentOrder['address'] }}</p>
                      <p class="details-line">配送费: {{ currentOrder['deliveryCost'] }}</p>
                      <p class="details-line">订单总价: {{ currentOrder['totalPrice'] }}</p>
                      <p class="details-line">订单备注: {{ currentOrder['remarks'] }}</p>
                    </el-card>
                  </div>
                  <el-table v-else :data="currentActiveOrders" height="500" border style="width: 100%">
                    <el-table-column prop="createTime" label="下单时间" width="160"></el-table-column>
                    <el-table-column prop="storeInfo.name" label="店铺名称" width="200"></el-table-column>
                    <el-table-column label="订单内容" width="200">
                      <template slot-scope="scope">{{ getOrderSummary(scope.row.orderItems) }}</template>
                    </el-table-column>
                    <el-table-column label="支付金额" width="100">
                      <template slot-scope="scope">￥ {{ scope.row.totalPrice }}</template>
                    </el-table-column>
                    <el-table-column label="订单状态" width="80">
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.status === 0" type="info">待接单</el-tag>
                        <el-tag v-if="scope.row.status === 1">已接单</el-tag>
                        <el-tag v-if="scope.row.status === 2" type="warning">配送中</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200">
                      <template slot-scope="scope">
                        <div style="display: flex; align-items: center; justify-content: center">
                          <el-button size="mini" round @click="(currentOrder = scope.row)">订单详情</el-button>
                          <el-button size="mini" type="danger" round v-if="scope.row.status === 0" @click="cancelOrder(scope.row['id'])">取消订单</el-button>
                        </div>
                      </template>
                    </el-table-column>
                    <!--<el-table-column prop="name" label="姓名" width="180"></el-table-column>-->
                    <!--<el-table-column prop="address" label="地址"></el-table-column>-->
                  </el-table>
                </transition>
              </div>
              <div class="dashboard-content-container" v-if="currentActive === '2-2'">
                <transition name="el-zoom-in-top" mode="out-in">
                  <div v-if="currentOrder">
                    <el-button round size="small" @click="currentOrder = null" icon="el-icon-arrow-left">返回历史订单</el-button>
                    <el-card style="margin: 16px 0;">
                      <h2 class="details-title">订单详情</h2>
                      <h4 class="sub-details-title">
                        订单状态
                        <span>
                          <el-tag v-if="currentOrder['status'] === 0">待接单</el-tag>
                          <el-tag v-if="currentOrder['status'] === 1">已接单</el-tag>
                          <el-tag v-if="currentOrder['status'] === 2">配送中</el-tag>
                          <el-tag v-if="currentOrder['status'] === 3">已完成</el-tag>
                          <el-tag v-if="currentOrder['status'] === 4">商家拒绝</el-tag>
                          <el-tag v-if="currentOrder['status'] === 5">订单取消</el-tag>
                        </span>
                      </h4>
                      <h4 class="sub-details-title">商家信息</h4>
                      <p class="details-line">名称: {{ currentOrder['storeInfo']['name'] }}</p>
                      <p class="details-line">地址: {{ currentOrder['storeInfo']['address'] }}</p>
                      <h4 class="sub-details-title">订单商品</h4>
                      <el-table :data="currentOrder['orderItems']" border style="width: 100%">
                        <el-table-column prop="productName" label="名称" width="180"></el-table-column>
                        <el-table-column prop="productCount" label="数量" width="180"></el-table-column>
                        <el-table-column label="单价" width="180">
                          <template slot-scope="scope">￥ {{ scope.row['productPrice'] }}</template>
                        </el-table-column>
                        <el-table-column label="总价" width="180">
                          <template slot-scope="scope">￥ {{ scope.row['productPrice'] * scope.row['productCount'] }}</template>
                        </el-table-column>
                        <el-table-column label="图片" width="180">
                          <template slot-scope="scope">
                            <div class="details-image" :style="{ backgroundImage: 'url(' + that.$common.getResourceUrl(scope.row['productImage']) + ')' }"></div>
                          </template>
                        </el-table-column>
                      </el-table>
                      <h4 class="sub-details-title">订单信息</h4>
                      <p class="details-line">订单编号: {{ currentOrder['id'] }}</p>
                      <p class="details-line">下单时间: {{ currentOrder['createTime'] }}</p>
                      <p class="details-line">收货人姓名: {{ currentOrder['contactname'] }}</p>
                      <p class="details-line">收货人联系电话: {{ currentOrder['phone'] }}</p>
                      <p class="details-line">收货人地址: {{ currentOrder['address'] }}</p>
                      <p class="details-line">配送费: {{ currentOrder['deliveryCost'] }}</p>
                      <p class="details-line">订单总价: {{ currentOrder['totalPrice'] }}</p>
                      <p class="details-line">订单备注: {{ currentOrder['remarks'] }}</p>
                    </el-card>
                  </div>
                  <el-table v-if="currentOrder === null && currentCommentOrder === null" :data="currentHistoryOrders" height="500" border style="width: 100%">
                    <el-table-column prop="createTime" label="下单时间" width="160"></el-table-column>
                    <el-table-column prop="storeInfo.name" label="店铺名称" width="200"></el-table-column>
                    <el-table-column label="订单内容" width="200">
                      <template slot-scope="scope">{{ getOrderSummary(scope.row.orderItems) }}</template>
                    </el-table-column>
                    <el-table-column label="支付金额" width="100">
                      <template slot-scope="scope">￥ {{ scope.row.totalPrice }}</template>
                    </el-table-column>
                    <el-table-column label="订单状态" width="110">
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.status === 3" type="success">已完成</el-tag>
                        <el-tag v-if="scope.row.status === 4" type="danger">商家拒绝</el-tag>
                        <el-tag v-if="scope.row.status === 5" type="info">订单取消</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="185">
                      <template slot-scope="scope">
                        <div style="display: flex; align-items: center; justify-content: center">
                          <el-button size="mini" round @click="(currentOrder = scope.row)">订单详情</el-button>
                          <el-button size="mini" round type="success" plain v-if="scope.row.status === 3 && scope.row['comment'] === null" @click="currentCommentOrder = scope.row">评价</el-button>
                          <el-button size="mini" round type="success" plain v-if="scope.row.status === 3 && scope.row['comment'] !== null" @click="showComment(scope.row['comment'])">查看评价</el-button>
                        </div>
                      </template>
                    </el-table-column>
                    <!--<el-table-column prop="name" label="姓名" width="180"></el-table-column>-->
                    <!--<el-table-column prop="address" label="地址"></el-table-column>-->
                  </el-table>
                  <div v-if="currentCommentOrder">
                    <OrderSubmission :order="currentCommentOrder" @success="commentAddSuccess"></OrderSubmission>
                  </div>
                </transition>
              </div>
              <div class="dashboard-content-container" v-if="currentActive === '3-1'">
                <Contact disable></Contact>
              </div>
              <div class="dashboard-content-container" v-if="currentActive === '3-2'">
                <PasswordCenter></PasswordCenter>
              </div>
              <div class="dashboard-content-container" v-if="currentActive === '3-3'">
                <div>
                  <div class="avatar-box">
                    <el-upload
                      class="avatar-uploader"
                      :action="this.$common.getApiUrl(this.$common.ELE_MONKEY_SERVER_URL.BASE, this.$common.ELE_MONKEY_API.UPLOAD_FILE)"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <div v-else class="upload-tips-box">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                      </div>
                    </el-upload>
                  </div>
                  <div style="width: 100%;display: flex;align-items: center;justify-content: center;">
                  <el-button type="primary" @click="updatelogo()" style="margin-top: 20px;" v-if="this.user.image">更新头像<i class="el-icon-upload el-icon--right"></i></el-button>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
</template>

<script>
import Contact from './Contact'
import PasswordCenter from './PasswordCenter'
import OrderSubmission from './OrderSubmission'
export default {
  name: 'Dashboard',
  components: {OrderSubmission, PasswordCenter, Contact},
  data () {
    return {
      that: this,
      currentActive: '1',
      currentActiveOrders: [],
      currentHistoryOrders: [],
      currentOrder: null,
      currentCommentOrder: null,
      current: 'login',
      imageUrl: '',
      user: {
        image: ''
      }
    }
  },
  created () {
    this.initializeActiveOrders()
    this.initializeHistoryOrders()
    this.imageUrl = this.$common.getResourceUrl(this.$store.state.currentUser.image)
  },
  methods: {
    handleAvatarSuccess (res, file) {
      this.user.image = res
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    updatelogo () {
      this.$customerAPI.logo_change(this.user.image).then((params) => {
        this.$store.state.currentUser.image = this.user.image
        this.$message({
          message: '图片修改成功',
          type: 'success'
        })
      })
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG / PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    commentAddSuccess () {
      this.currentCommentOrder = null
      this.initializeHistoryOrders()
    },
    showComment (comment) {
      const h = this.$createElement
      const that = comment
      this.$msgbox({
        message: h('p', null, [
          h('h4', null, '评价时间: ' + that['createTime']),
          h('h4', null, '评价内容: ' + that['message']),
          h('h4', null, '评价等级: ' + that['rank'] + '颗星')
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
    },
    commentOrder (orderId) {
      this.$merchantAPI.order_comment(orderId).then((params) => {
        console.log(params.data)
      })
    },
    cancelOrder (orderId) {
      this.$merchantAPI.order_updateStatus(orderId, 5).then((params) => {
        this.$message('订单已取消！')
        this.initializeActiveOrders()
      })
    },
    changeActive (index) {
      this.currentActive = index
    },
    getOrderSummary (orderItems) {
      let summary = '菜品: '
      orderItems.forEach((item) => {
        summary += item['productName'] + 'x' + item['productCount'] + ', '
      })
      return summary.substring(0, summary.lastIndexOf(','))
    },
    initializeActiveOrders () {
      this.$customerAPI.orders_active().then((params) => {
        this.currentActiveOrders = params.data
      })
    },
    initializeHistoryOrders () {
      this.$customerAPI.orders_history().then((params) => {
        this.currentHistoryOrders = params.data
      })
    }
  },
  watch: {
    currentActive (index) {
      this.currentOrder = null
      this.currentCommentOrder = null
      switch (index) {
        case '2-1':
          this.initializeActiveOrders()
          break
        case '2-2':
          this.initializeHistoryOrders()
          break
      }
    },
    currentOrder (val) {
      this.initializeHistoryOrders()
      this.initializeActiveOrders()
    }
  }
}
</script>

<style scoped>
  .avatar-box{
    height: 270px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @keyframes myfirst
  {
    from { width: 180px; height: 180px; }
    to { width: 220px; height: 220px; }
  }
  @-moz-keyframes myfirst /* Firefox */
  {
    from { width: 180px; height: 180px; }
    to { width: 220px; height: 220px; }
  }
  @-webkit-keyframes myfirst /* Safari 和 Chrome */
  {
    from { width: 180px; height: 180px; }
    to { width: 220px; height: 220px; }
  }
  @-o-keyframes myfirst /* Opera */
  {
    from { width: 180px; height: 180px; }
    to { width: 220px; height: 220px; }
  }
  .avatar{
    margin-top: 36px;
    width: 200px;
    border-radius: 50%;
    height: 200px;
    animation: myfirst .75s;
    -moz-animation: myfirst .75s;
    -webkit-animation: myfirst .75s;
    -o-animation: myfirst .75s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  .avatar:hover{
    border: 5px solid #f3b274;
  }
  .dashboard {
    padding: 0 260px;
    margin-top: 26px;
    display: flex;
    flex-direction: column;
  }
  .dashboard-container {
    width: 100%;
    padding: 24px 15px 40px 15px;
    background-color: white;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
  }
  .summary-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 45px;
    color: white
  }
  .summary-card-active {
    background-color: #409EFF;
  }
  .summary-card-history {
    background-color: #67C23A;
  }
  .details-title {
    letter-spacing: 2px;
    padding-bottom: 20px;
  }
  .sub-details-title {
    letter-spacing: 2px;
    padding-bottom: 10px;
    color: #515151;
    border-bottom: 1px solid rgba(0,0,0,0.1);
  }
  .details-line {
    padding: 4px 0;
    margin: 0;
    font-size: 14px;
    line-height: 28px;
    color: #a2a2a2;
  }
  .details-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
</style>
